<template>
<div>
  <img id="image" src="./7.jpg">
  <canvas id="canvas" ></canvas>
</div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import * as tf from '@tensorflow/tfjs'
import * as bodyPix from '@tensorflow-models/body-pix'

export default defineComponent({
  name: 'tfjs',
  setup () {
    async function loadAndPredict () {
      const img = document.getElementById('image')
      console.info(img)
      tf.getBackend()
      const net = await bodyPix.load()
      console.info(net)
      const segmentation = await net.segmentPerson((img as HTMLImageElement))
      // const maskBackground = true
      const foregroundColor = { r: 255, g: 0, b: 0, a: 0 }
      const backgroundColor = { r: 0, g: 0, b: 255, a: 255 }
      const backgroundDarkeningMask = bodyPix.toMask(
        segmentation,
        foregroundColor,
        backgroundColor
      )
      const opacity = 1
      const maskBlurAmount = 0
      const flipHorizontal = false

      const canvas = document.getElementById('canvas')
      bodyPix.drawMask(
        canvas as HTMLCanvasElement, img as HTMLImageElement, backgroundDarkeningMask, opacity, maskBlurAmount, flipHorizontal)
    }
    onMounted(() => {
      loadAndPredict()
    })
    return {}
  }
})
</script>

<style scoped>

</style>
